const path = require('path') // nodejs核心模块，专门处理路径问题
const ESLintWebpackPlugin = require("eslint-webpack-plugin");// eslint插件
const HtmlWebpackPlugin = require("html-webpack-plugin");// html插件
module.exports = {
    // 入口
    entry: './src/main.js',// 相对路径
    // 输出
    output: {
        // 路径 - 绝对路径
        // path: './dist',
        // __dirname 当前文件夹的目录


        //path: path.resolve(__dirname, 'dist'),
        // filename: 'main.js'// 文件名
        //filename: 'static/js/main.js',// 文件名
        // 每次打包前先清理dist目录  原理：在打包前，将path整个目录内容清空，再进行打包
        //clean: true,

        path: undefined, // 开发模式没有输出，不需要指定输出目录
        filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
        // clean: true, // 开发模式没有输出，不需要清空输出结果
    },
    // loader
    module: {
        rules: [
            // loader的配置
            // 处理css资源
            {
                test: /\.css$/i,//只检测css文件，i表示忽略大小写
                use: [          // 执行顺序：从后往前,执行多个loader
                    'style-loader', //将js中css通过创建style标签添加html文件中生效
                    'css-loader'  // 将css资源编译成commonjs的模块到js中
                ],
            },
            // 处理less资源
            {
                test: /\.less$/i,
                // loader:"xxx",// 处理一个loader
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            // 处理scss资源
            {
                test: /\.s[ac]ss$/,
                use: ["style-loader", "css-loader", "sass-loader"],
            },
            // 处理stylus
            {
                test: /\.styl$/,
                use: ["style-loader", "css-loader", "stylus-loader"],
            },
            // 处理图片资源
            {
                test: /\.(png|jpe?g|gif|webp)$/,
                type: "asset", // 图片资源 
                parser: {
                    dataUrlCondition: {
                        maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
                        //优点：减少请求数量
                        //缺点：体积变得更大
                    }
                },
                generator: {
                    // 图片名称
                    // [hash:10] hash值取前10位
                    // [ext] 文件扩展名
                    // [query] 查询参数
                    filename: 'static/images/[hash:10][ext][query]'
                },
                // 图片资源压缩
                // loader: 'image-webpack-loader',
            },
            // 处理字体图标
            {
                test: /\.(ttf|woff2?)$/,
                type: 'asset/resource',// 字体图标 相对于只使用file_loader ,不用像图片资源一样还使用url_loader
                generator: {
                    filename: 'static/fonts/[hash:10][ext][query]'
                }
            },
            // 处理其他资源
            {
                test: /\.(map4|map3|avi)$/,
                type: 'asset/resource',
                generator: {
                    filename: 'static/media/[hash:10][ext][query]'
                }
            },
            // 处理js资源 babel-loader
            {
                test: /\.js$/,
                exclude: /node_modules/, // 排除node_modules代码不编译
                loader: "babel-loader",
            },
        ],
    },
    // plugin
    plugins: [
        // plugin的配置
        // new ESLintWebpackPlugin({
        //     // 指定检查的文件范围
        //     context: path.resolve(__dirname, '../src'),
        //     //exclude: 'node_modules',      // 排除node_modules目录
        // })，
        new HtmlWebpackPlugin({
            // 以 public/index.html 为模板创建文件
            // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
            template: path.resolve(__dirname, "../public/index.html"),
        }),
    ],

    // 开发服务器
    devServer: {
        host: "localhost", // 启动服务器域名
        port: "3000", // 启动服务器端口号
        open: true, // 是否自动打开浏览器
    },
    // mode 
    mode: 'development',
}